﻿
@{
    ViewBag.Title = "发电记录";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<link rel="stylesheet" href="~/Content/css/frozenui.css">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/swiper.min.css">
@*<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>*@
<script src="~/Content/script/swiper.min.js"></script>
<script src="~/Content/script/Uitls.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        position: relative;
        height: 100%;
    }

    li, a {
        list-style: none;
        text-decoration: none;
    }

    .swiper-container {
        width: 100%;
    }

    #nav {
        background: #fff;
    }

        #nav .swiper-wrapper {
            height: 1.68rem;
            box-sizing: border-box;
            margin: 0;
            line-height: 1.6rem;
            border-bottom: 2px solid #dfe0e1;
        }

        #nav li {
            text-align: center;
            color: #424242;
            font-size: 0.63rem;
        }

            #nav li span {
                color: #3597D9;
            }

        #nav .active-nav {
            color: #2ECA70;
            border-bottom: 2px solid #2ECA70;
        }

            #nav .active-nav span {
                color: #2ECA70;
            }

    #tableHeader {
        height: 40px;
    }

        #tableHeader table {
            width: 100%;
            height: 40px;
            color: #fff;
            font-size: 15px;
        }

            #tableHeader table th:nth-child(even) {
                background: #4FC2A1;
            }

            #tableHeader table th:nth-child(odd) {
                background: #334960;
            }

    #page {
        position: absolute;
        top: 5.3rem;
        left: 0;
        right: 0;
        bottom: 2.4rem;
        overflow: hidden;
    }

        #page .swiper-slide {
            text-align: center;
            font-size: 30px;
            overflow-y: scroll;
            position: relative;
        }

    .dropload-down {
        display: none;
    }

    #page table {
        background: #fff;
    }

    #page .swiper-slide table {
        width: 100%;
    }

    #page table tr:nth-child(even) {
        background: #F8F8F8;
    }

    #page tr td {
        font-size: 0.5rem;
        color: #000;
        padding: 0.3rem 0;
        font-family: "微软雅黑";
        border-left: 1px solid #dedede;
        word-break: break-all;
    }

        #page tr td:nth-child(1), #page tr td:nth-child(4) {
            width: 25%;
        }

        #page tr td:nth-child(2), #page tr td:nth-child(3) {
            width: 20%;
        }

        #page tr td:nth-child(5) {
            width: 8%;
        }

    #seacher {
        display: flex;
        justify-content: space-between;
        padding: 6px 8px;
        background: #E9EDF0;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #seacher input {
            margin-right: 10px;
            width: 80%;
            background: #fff;
            border: none;
            border-radius: 5px;
            outline: none;
            box-sizing: border-box;
            padding: 0 10px;
            text-align: center;
            font-size: 0.6rem;
            height: 1.32rem;
        }

        #seacher button {
            width: 20%;
            border-radius: 4.96px;
            border: none;
            background: #2ECA70;
            color: #fff;
            outline: none;
            line-height: 1.32rem;
            font-size: 0.6rem;
            height: 1.32rem;
        }

            #seacher button img {
                width: 0.7rem;
                vertical-align: text-top;
                display: inline;
            }

    #timeRadio {
        display: flex;
        padding: 2px 6px;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #timeRadio .ui-radio {
            margin-right: 0.72rem;
            line-height: 1.32rem;
            font-size: 0.65rem;
            color: #424242;
            font-weight: bold;
        }

            #timeRadio .ui-radio input {
                width: 1rem;
                height: 1rem;
                top: -0.1rem;
                margin-right: 0.1rem;
            }

                #timeRadio .ui-radio input:before {
                    width: 0.9rem;
                    height: 0.9rem;
                    background: #fff;
                    left: 0.05rem;
                    top: 0.05rem;
                    border-radius: 0.5rem;
                }

                #timeRadio .ui-radio input:checked:after {
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #2ECA70;
                    border: 1px solid #2ECA70;
                    border-radius: 0.4rem;
                    left: 0.25rem;
                    top: 0.25rem;
                }

    #footer {
        /*position: absolute;
            height: 1.6rem;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            margin: 0;
            background-color: #00bcd4;*/
        position: absolute;
        height: 1.6rem;
        left: 0;
        right: 0;
        bottom: 2rem;
        padding: 0;
        margin: 0;
        background-color: #00bcd4;
        z-index: 999;
    }

        #footer .ui-btn-primary {
            height: 1.6rem;
            width: 100%;
            line-height: 1.6rem;
            font-size: 0.68rem;
        }
</style>
@*</head>
    <body>*@
<div id="seacher">
    <input id="Msg" type="text" placeholder="请输入油机编号查询">
    <button id="Search"><img src="~/Content/image/search (1).png" alt="Alternate Text" />&nbsp;搜索</button>
</div>
<div id="timeRadio">

    <label class="ui-radio" for="radio">
        <input type="radio" id="allGen" name="radio" value="0" />全部
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" id="inGen" checked="" name="radio" value="1" />今日
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" id="standGen" name="radio" value="7" />一周
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" id="fixGen" name="radio" value="30" />本月
    </label>
    <label style="line-height:28px;float:right;color:#808080;font-size:10px">
        <span id="genrecordListCount">共0条</span>
    </label>
</div>
<div id="tableHeader">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th style="text-align:center;width:25%">油机</th>
            <th style="text-align:center;width:20%">开始时间</th>
            <th style="text-align:center;width:20%">结束时间</th>
            <th style="text-align:center;width:25%">空/带载</th>
            <th style="text-align:center;width:8%">详细</th>
        </tr>
    </table>
</div>
<div class="swiper-container" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage" id="loadPage">
            @*退服*@
            <table cellpadding="0" cellspacing="0" id="GenrecordList">
                @*<tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td><a>>></a></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>
                    <tr>
                        <td>gz297</td>
                        <td>09-26 17:51</td>
                        <td>09-26 17:51</td>
                        <td>0.019/0.083</td>
                        <td>>></td>
                    </tr>*@



            </table>
        </div>
    </div>
</div>
<script>
    var pagesize = 20
    var topNum = 0
    var Isload = false;//锁
    var radioValue = 0;
    var Msg = "";//查询
    var IslastData = false //标记最后一条数据
    GenrecordList(1, ""); //初始化 默认今日
    $("#allGen").prop("checked", false);
    $("#inGen").prop("checked", true);
    $("#standGen").prop("checked", false);
    $("#fixGen").prop("checked", false);

    (function (designWidth, maxWidth) {
        var html = document.getElementsByTagName("html")[0];
        var tid;
        function refreshRem() {
            var width = html.getBoundingClientRect().width;
            console.log(width / 15)
            html.style.fontSize = width / 15 + "px"
        }
        window.addEventListener("resize", function () {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
        refreshRem();
    })();

    //工单状态tap点击事件
    (function (doc, win) {
        var size = 10;
        var myNav = new Swiper('#nav', {
            spaceBetween: 10,
            slidesPerView: 4,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            on: {
                tap: function () {
                    menuIndex = myNav.clickedIndex;
                    myPage.slideTo(myNav.clickedIndex);
                }
            }
        });

        //$("#footer").click(function () {
        //    $('.ui-actionsheet').addClass('show');
        //});
        //$("#addGen").click(function() {
        //    window.location.href = '/Generator/AddGen';
        //})
        //$("#cancel").click(function () {
        //    $(".ui-actionsheet").removeClass("show");
        //});
        ////工单状态滑动事件
        //var myPage = new Swiper('#page', {
        //    on: {
        //        slideChangeTransitionStart: function () {
        //            updateNavPosition()
        //        }
        //    }
        //});

        //工单状态滑动方法
        function updateNavPosition() {
            $('#nav .active-nav').removeClass('active-nav');
            var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
            menuIndex = activeNav.index();
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() >= myNav.activeIndex) {
                    var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                    myNav.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    myNav.slideTo(activeNav.index())
                }
            }
        }

    })(document, window);



    var datalist = "";
    var genrecordListCount = 0;//统计
    //获取发电记录
    function GenrecordList(type, paraStr) {
        //ajax参数
        var paramdata = {
            type: type,
            paraStr: paraStr,
            pagesize: pagesize,
            topNum: topNum
        };
        Isload = true;
        $.ajax({
            url: '/api/Info/GetGenRecord',
            type: 'get',
            data: paramdata,
            beforeSend: function () {
                openLoading();
            },
            error: function (data) {
                closeLoading();
                console.log(JSON.stringify(data));
            },
            success: function (data) {
                closeLoading();
                //$("#GenrecordList").html("");
                //var result = eval(data);
                //var result = JSON.parse(data);//转化
                console.log(data)
                var result = data.Data;
                genrecordListCount = result.total
                result = result.data
                if (result == null || result == "") {
                    var localnoRecordTxt = "<tr><td colspan=5 class='aui-text-center'>总共" + genrecordListCount + "条记录---到底了</td></tr>";
                    //datalist = noRecordTxt
                    if (!IslastData) {
                        IslastData = true
                        datalist = localnoRecordTxt
                        $("#GenrecordList").append(datalist);
                    }
                } else {
                    console.log(result)
                    result.forEach(function (d, i) {
                        d.GenFee = d.GenFee == null ? 0 : d.GenFee;
                        d.KWpower = d.KWpower == null ? 0 : d.KWpower;
                        d.RunningPeriod = d.RunningPeriod == null ? 0 : d.RunningPeriod;
                        //处理空载
                        var genstar = utilss.formatDate(d.GenStart, 'MM/dd hh:mm');
                        var genstop = utilss.formatDate(d.GenStop, 'MM/dd hh:mm');
                        var unRunningPeriod;
                        //console.log(d.RunningPeriod);
                        //console.log(d);
                        if (!myIsNaN(d.RunningPeriod)) d.RunningPeriod = 0;
                        
                            if (d.RunningPeriod.toFixed(3) !== "0.000") {
                                unRunningPeriod = ((Date.parse(utilss.formatDate(d.GenStop, 'yyyy/MM/dd hh:mm:ss')) - Date.parse(utilss.formatDate(d.GenStart, 'yyyy/MM/dd hh:mm:ss'))) / (1000 * 60 * 60)) - d.RunningPeriod.toFixed(3);//计算空载时长
                                unRunningPeriod = unRunningPeriod ? unRunningPeriod.toFixed(3) : '0.000';//取3位小数
                                unRunningPeriod = unRunningPeriod <= 0 ? '0.000' : unRunningPeriod;//修正空载时长，下于0时则未0;
                            } else {
                                unRunningPeriod = ((Date.parse(utilss.formatDate(d.GenStop, 'yyyy/MM/dd hh:mm:ss')) - Date.parse(utilss.formatDate(d.GenStart, 'yyyy/MM/dd hh:mm:ss'))) / (1000 * 60 * 60)).toFixed(3) - d.RunningPeriod.toFixed(3);//计算空载时长
                            }
                        
                        datalist = "<tr><td>" + d.GensetNum + "</td><td>" + genstar + "</td><td>" + genstop + "</td><td>" + unRunningPeriod + "/" + d.RunningPeriod.toFixed(3) + "</td><td><a href='/Genrecord/Detail?GenRecordId=" + d.GenRecordId + "'>>></a></td></tr>" + datalist;
                       // genrecordListCount++;
                        topNum = d.GenRecordId
                        //console.log(d.GenRecordId)
                    })
                    $("#GenrecordList").append(datalist);

                }
                Isload = false;
                //console.log(genrecordListCount)
                if (genrecordListCount >= 10000) //4位数
                {
                    $("#genrecordListCount").html("" + genrecordListCount + "");
                }
                else {
                    $("#genrecordListCount").html("共" + genrecordListCount + "条");
                }
               // $("#genrecordListCount").html("共" + genrecordListCount + "条");
                datalist = "";
                genrecordListCount = 0;
            }
        })
    }

    //刷新
    //$("#returnList").click(function () {
    //    $("#Msg").val('');
    //    $(".ui-actionsheet").removeClass("show");
    //    GenrecordList(1, "");
    //    $("#allGen").prop("checked", false);
    //    $("#inGen").prop("checked", true);
    //    $("#standGen").prop("checked",false);
    //    $("#fixGen").prop("checked",false);
    //})

    //radio点击事件
    $(':radio').click(function () {
        $("#Msg").val('');
        initQuery()
        radioValue = $(this).val()  //获取选中的radio的值
        GenrecordList(radioValue, '');
    });

    //搜索
    $("#Search").click(function () {
         Msg = $("#Msg").val().trim();
        if (Msg=="") {
            alert("请输入油机编号");
            return;
        }
        initQuery()
        GenrecordList(0, Msg);
        $("#allGen").prop("checked", false);
        $("#inGen").prop("checked", false);
        $("#standGen").prop("checked", false);
        $("#fixGen").prop("checked", false);
    })

    //复原查询
    function initQuery() {
        IslastData = false;//最后一条数据标记
        topNum = 0;//
        $("#GenrecordList").html(""); //清空列表
        Msg = $("#Msg").val().trim();
    }

    // true:数值型的，false：非数值型
    function myIsNaN(value) {
        if (value == {}) return false;
        return typeof value === 'number' && !isNaN(value);
    }
    //滚动刷新
    $(document).ready(function () {
        setTimeout(function() { document.getElementById("inGen").click();}, 10);
        // console.log("滚动刷新")
        var $el = $("#loadPage");
        // console.log($el)
        var menuIndex = 0;
        loadData($el, function () {
            // 防止加载多次请求 这里非常重要 这里非常重要 这里非常重要
            console.log("请求-loadtee")
            if (Isload) return false;
            //topNum = 1000000// 测试
            console.log(Msg)
            GenrecordList(radioValue, Msg);

        });
    })

   @*/**
   *
   * @param {Element} $el 需要滚动的高度
   * @param {Number} difference 距离底部触发callback
   * @param {Function} callback 下拉加载的回调
   */*@
    function loadData($el, callback, config) {
        config = config || {};
        config.difference = config.difference || 20;
        var timer = null;
        $el.scroll(function (e) {
            //  console.log("loadData--事件节流")
            // 事件节流
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                var $content = $(this)[0];
                var scrollHeight = $content.scrollHeight;
                var scrollTop = $content.scrollTop + $el.height();
                if (scrollTop + config.difference > scrollHeight) {
                    callback && callback();
                }
            }, 300);
        });
    }
</script>

